<%--
  Created by IntelliJ IDEA.
  User: HJC
  Date: 2019/11/14
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>subject select</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/subQuestion.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<div id="div-head-more">
    <form action="${pageContext.request.contextPath}/question/queryLimit" method="post" id="form-sub">

        <table border="0" cellpadding="0" cellspacing="0" align="center">
            <caption><h1 id="${user.userId}">hello,${user.userName} ${user.classroomID}</h1></caption>
            <tr><td><span>选择科目：</span></td></tr>
        </table>
    </form>
</div>
<style>
    .fixeds{
        top: 200px;
        width: 80px;
        height: 25px;
        padding-right: 10px;
        background: rgba(20%,50%,40%,.7);
        position: fixed;
        border-radius: 15px;
        text-align: center;
        cursor: pointer;
        margin-top: -10px;
        display: none;
    }
    .fixeds:hover{
        background: rgba(50%,80%,50%,.9);
    }
</style>
<div class="fixeds">查看得分</div>
<style>
    a{
        display: block;
        width: 100px;
        height: 30px;
        text-decoration: none;
        color: #ffffff;
        border-radius: 5px;
        background-color: burlywood;
    }
    a:hover{
        background-color: orangered;
    }
</style>
<div id="re-div-bg">
    <div id="re-div-main">
        <span id="re-span-exit">&times;</span>
        <table border="1" cellspacing="0" cellpadding="0" align="center">
            <caption id="tab-cap-info">答题结果 ^_^</caption>
            <tr>
                <td>Uid</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>得分</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>错题</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>答题数</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>答题科目</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>开始时间</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td>结束时间</td>
                <td><b name="uid"></b></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <a href="${pageContext.request.contextPath}/question/refortq"><span class="fa fa-check" ></span>继续答题</a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        //异步请求得到科目
        $.post("${pageContext.request.contextPath}/course/querySubj",function(data){
            //遍历得到的数据
            $.each(data,function(i,n){
                //table中添加数据
                if( i%5==0 || i == 0){
                    //tr 第一行  和每5行
                    $('table').append('<tr></tr>');
                }
                //append 添加到talbe tr里面 tbody
                $('table tbody:eq(0)').append('<td>' +
                    '<input type="checkbox" id="' +n.courseName+ '" name="subid['+i+']" value="'+n.courseNO+'"sub="'+n.courseName+'">' +
                    '<label for="' +n.courseName+ '"> ' +n.courseName+ '</label>' +
                    '</td>');
            });
            //选题数量
            $('table:eq(0)').append('<tr><td colspan="5" align="center">' +
                ' <select name="count">' +
                    '<option value="10">&emsp;10</option>' +
                    '<option value="20">&emsp;20</option>' +
                    '<option value="30">&emsp;30</option>' +
                    '<option value="40">&emsp;40</option>' +
                    '<option value="50">&emsp;50</option>' +
                '</select>' +
                    //提交
                '<input type="submit" value="开始答题" id="startans"></td></tr>');
        },"json");
    });
</script>
<script>
    $(function(){
        /*******************************************
         *  val
         *******************************************/
        //记录当前时间
        //判断是否在前面加0
        var myDate;
        var year;        //获取当前年
        var month;   //获取当前月
        var date;            //获取当前日
        var h;              //获取当前小时数(0-23)
        var m;          //获取当前分钟数(0-59)
        var s;
        var now;
        // 答题数量；
        var count = $('select option:selected').val();
        //正确答案;
        var anstrue = {};
        //得分
        var score = 0;
        //正确提交数量
        var t_count = 0;
        //checked
        var answer = '';
        // checked name
        var checkName = '';
        //答对的题
        var trueNumber = '';
        //错题编号
        var errorNumber = '';
        //答题科目
        var subject = '';
        // uid
        var uid = $('h1').attr('id');
        //多选
        var choose = 0;
        var topic = '';
        //题目编号
        var picId = '';
        //学生答题编号
        var stuId = '';
        /***********************************
         * Globals
         * *******************************/
        // form 提交事件注册
        $('#form-sub').submit(function(){
            //科目数组
            var arrVal = [];
            //遍历checkbox 得到选中的val
            $('table input[type=checkbox]').each(function(){
                //push到 数组里面
                if ($(this).prop('checked')) {
                    subject += $(this).attr('sub') + ',';
                    arrVal.push($(this).val());
                }
            });
            //没选科目？
            if(arrVal.length ==0 ) {
                alert("请选择科目");
                return false;
            }
            $('#startans').attr('disabled',true).attr('value','submitting...');
            //请求数据
            $.post("${pageContext.request.contextPath}/question/queryLimit",{
                //传入数组 JSON.stringify() 方法将 JavaScript 对象转换为字符串
                subid:JSON.stringify(arrVal),
                //答题数量
                count:$('select option:selected').val()
                },function(data) {
                    myDate = new Date();
                    year=myDate.getFullYear();        //获取当前年
                    month=myDate.getMonth()+1;   //获取当前月
                    date=myDate.getDate();            //获取当前日
                    h=myDate.getHours();              //获取当前小时数(0-23)
                    m=myDate.getMinutes();          //获取当前分钟数(0-59)
                    s=myDate.getSeconds();
                    now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
                    count = $('select option:selected').val();
                    //回调函数
                    <%--window.location.href = "${pageContext.request.contextPath}/question/answer";--%>
                    //初始化div
                    $('form').remove();
                    //新结构 div > form table >tr > td
                    var value =  '<form action="${pageContext.request.contextPath}/question/answer" method="post" id="form-answer">' +
                        '<table border="0" cellspacing="0" cellpadding="0" width="650px" align="center">';
                    $(data).each(function(i,n){
                        picId += n.question_id + ',';
                        topic += n.question_answer + ',';
                        value += '<tr><td class="div-style-mian">'+i+'. '+n.question_text+'</td></tr>';
                        value += '<tr><td>&emsp;<input type="radio" id="'+n.question_id+'Aa" name="'+n.question_id+'" value="A" class="sumit">' +
                            '<label for="'+n.question_id+'Aa"><span id="'+n.question_id+'A">A. '+n.answer_a+'</span></label></td></tr>';
                        value += '<tr><td>&emsp;<input type="radio" id="'+n.question_id+'Bb" name="'+n.question_id+'" value="B" class="sumit">' +
                            '<label for="'+n.question_id+'Bb"><span id="'+n.question_id+'B">B. '+n.answer_b+'</label></span></td></tr>';
                        value += '<tr><td>&emsp;<input type="radio" id="'+n.question_id+'Cc" name="'+n.question_id+'" value="C" class="sumit">' +
                            '<label for="'+n.question_id+'Cc"><span id="'+n.question_id+'C">C. '+n.answer_c+'</label></span></td></tr>';
                        value += '<tr><td>&emsp;<input type="radio" id="'+n.question_id+'Dd" name="'+n.question_id+'" value="D" class="sumit">' +
                            '<label for="'+n.question_id+'Dd"><span id="'+n.question_id+'D">D. '+n.answer_d+'</label></span></td></tr>';
                        anstrue[n.question_id] =n.question_answer ;
                    });
                    value += '<tr><br/><td align="center"><input id="form-submit" type="submit" value="确认提交"></td></tr>';
                    value += '</table></form>';
                    //append
                    $('#div-head-more').append(value);
                    //遍历input 确定多选题为checkbox
                    $('input[type=radio]').each(function(i){
                        if(anstrue[$(this).attr('name')].length !=1 ){
                            $(this).attr("type","checkbox");
                            choose ++;
                        }
                    });
                },"JSON");
            return false;
        });

        // 提交答题
        $(document).on('submit','#form-answer',function(){
            $('.fixeds').css('display','block');
            $("#form-submit").attr("disabled",true).attr("value" , "Submitting...");
            myDate = new Date();
            year=myDate.getFullYear();        //获取当前年
            month=myDate.getMonth()+1;   //获取当前月
            date=myDate.getDate();            //获取当前日
            h=myDate.getHours();              //获取当前小时数(0-23)
            m=myDate.getMinutes();          //获取当前分钟数(0-59)
            s=myDate.getSeconds();
            var now2 =year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
            var errid = 0;
            //遍历题
            if(choose != 0){
                //遍历checkbox
                var answerid = $('input[type=checkbox]').attr('name');
                $('input[type=checkbox]').each(function(i){
                    if($(this).is(":checked")){
                        if($(this).attr('name') == checkName || checkName ==''){
                            answer += $(this).val();
                        }else{
                            answerid += ',' + $(this).attr('name');
                            answer += ',';
                            answer += $(this).val();
                        }
                        checkName = $(this).attr('name');
                    }
                });
            }
            // radio
            if(answer != undefined && choose != 0){
                //切割答案
                // answer = answer.substr(0,-2);
                // answerid = answerid.substr(0,-2);
                answer = answer.split(',');
                answerid = answerid.split(',');
            }
            var b_checkbox_answer = 0;
            var a_checkbox_answer = 4;
            var name_change = '';
            $('.sumit').each(function(i,n){
                if (a_checkbox_answer == 0){
                    a_checkbox_answer = 4 ;
                }
                if ($(n).prop('type') == 'radio'){
                    a_checkbox_answer = 0;
                    if($(n).is(":checked")){
                        stuId += $(n).val() + ',';
                        t_count ++ ;
                        if($(n).val() == anstrue[$(n).prop('name')]){
                            trueNumber += $(n).prop('name') + ',';
                        }else{
                            if (errid < 15){
                                //错题编号
                                errorNumber +=$(n).prop('name') + ',';
                            }else{
                                errorNumber +=$(n).prop('name') + ',' + '<br>';
                                errid = 0;
                            }
                        }
                    }
                }else if ($(n).prop('type') == 'checkbox'  && answer[b_checkbox_answer] != undefined) {
                    if (name_change =='' || name_change != $(n).prop('name')) {
                        stuId += answer[b_checkbox_answer] + ',';
                        if(answer[b_checkbox_answer] == anstrue[answerid[b_checkbox_answer]]){
                            if (answer[b_checkbox_answer] != undefined){
                                t_count++;
                                trueNumber += answerid[b_checkbox_answer] + ',';
                                b_checkbox_answer++;
                            }
                        }else{
                            //错题编号：
                            errorNumber +=answerid[b_checkbox_answer] + ',';
                            b_checkbox_answer++;
                            t_count++;
                        }
                        name_change = $(n).prop('name');
                    }
                }
            });
            if(t_count < count){
                $("#form-submit").attr("disabled",false).attr("value" , "确认提交");
                alert('请把题答完哦。');
                //重置
                t_count = 0;
                // score = 0;
                anstrue = {};
                answer = '';
                checkName = '';
                errorNumber = '';
                // trueNumber = '';
                // topic = '';
                // picId = '';
                stuId = '';
                return false;
            }
            //ending.............
            // topic = topic.substr(0,-2);
            // trueNumber = trueNumber.substr(0,-2);
            // errorNumber = errorNumber.substr(0,-2);
            // subject = subject.substr(0,-2);
            /**
             * change 1.5
             * */
            var change1_5_1 = stuId.split(',');
            var change1_5_2 = topic.split(',');
            $(change1_5_1).each(function(i,n){
                if (n == change1_5_2[i] && n != '') {
                    score+=2;
                }
            });
            var random = parseInt(10 + (999990 - 10) * (Math.random()));
            console.log('tid:' + random);
            console.log('答案:'+ topic);
            console.log('正确的题：' + trueNumber );
            console.log('错题：'+ errorNumber);
            console.log('已答题：'+t_count);
            console.log('总题数：'+ count);
            console.log('得分：'+ score);
            console.log('开始时间：'+now);
            console.log('结束时间：'+now2);
            console.log('答题科目:' + subject);
            console.log('uid:' + uid);
            console.log('?');
            //存入数据
            $.post("${pageContext.request.contextPath}/statistics/statisInsert",
                {
                    'tid' : random,
                    'allTopic' : topic ,
                    'correctAnswer' : trueNumber ,
                    'errorAnswer' :errorNumber ,
                    'fraction' :score ,
                    'uid' :uid ,
                    'startTime' : now,
                    'endTime' :now2 ,
                    'answerNumber' : count,
                    'subject' :subject  ,
                    'sortId' : random ,
                    'allAnswer' :random ,
                    'returnJson' :random
                },function(data){
                    console.log(data);
                    console.log('success');
                    //答案回调
                    var green = picId.split(',');
                    var topicId = topic.split(',');
                    var red = stuId.split(',');
                    console.log("your::::::::::::"+red);
                    $(green).each(function(i,n){
                        if(n !=''){
                            $('#'+n+red[i]).css('color','red');
                            $('#'+n+topicId[i]).css('color','green');
                            $('#'+n+'D').append('<p style="color:dodgerblue;">正确答案是'+topicId[i]+'，你的答案是'+red[i]+'</p>');
                            $('#form-answer').attr('action','${pageContext.request.contextPath}/statistics/oldStatis');
                            $("#form-submit").attr("disabled",false);
                            $('#form-submit').val('查看答题记录');
                            $('#form-answer').removeAttr('id');
                            //-----------data--------------
                            $('b:eq(0)').text(uid);
                            $('b:eq(1)').text(score);
                            $('b:eq(2)').text(errorNumber.length > 80?errorNumber.substring(0,80) : errorNumber);
                            $('b:eq(3)').text(count);
                            $('b:eq(4)').text(subject);
                            $('b:eq(5)').text(now);
                            $('b:eq(6)').text(now2);
                        }
                    });
                    $("#re-div-bg").css("display","block");
                },'json');
            return false;
        });
        $(document).on("click","span",function(){
            $("#re-div-bg").css("display","none");
        });
        $(document).on("click",".fixeds",function(){
            $("#re-div-bg").css("display","block");
        });
    });
</script>
</html>
